<template>
  <div class="container">
    <!-- 菜单 -->
    <el-row class="tac">
      <el-col>
        <el-menu :default-active="menu" class="el-menu-vertical-demo">
          <el-menu-item
            :index="route.name"
            v-for="route in filterMenuRoutes"
            :key="route.path"
            @click="menuClick"
          >
            <el-icon>
              <component :is="route.meta.icon"></component>
            </el-icon>
            <span>{{ route.meta.name }}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!-- 菜单右侧内容 -->
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";

export default defineComponent({
  name: "Menu",
});
</script>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
const router = useRouter(); // 获取路由对象

// 接收父组件传递过来的props
const props = defineProps<{
  MenuRoutes: any; // 路由菜单
  code: string;
}>();

// 过滤后的路由表 里面有hidden就不显示
const filterMenuRoutes = props.MenuRoutes.filter((item: any) => {
  if (!item.hidden) {
    return item;
  }
});

// 路由菜单对应的下标
const menu = computed(() => {
  return useRoute().name;
});

// 点击菜单跳转路由
function menuClick(data: { index: string }) {
  router.push({
    name: data.index,
    query: {
      code: props.code,
    },
  });
}
</script>

<style scoped>
.container {
  display: flex;
  margin: 0 auto;
  width: 1200px;
  min-height: 700px;
  padding: 15px 0;
  color: #7f7f7f;
}
</style>
